<template>
  <q-card id="comment" class="q-mt-sm w-400">
    <q-card-section>
      <div class="font-semibold text-lg">全部评论</div>
      <div v-if="comments.length == 0" class="flex justify-center items-center">
        <div class="text-h6 q-pa-sm">此时无声胜有声~</div>
      </div>
      <q-item class="q-pa-none q-py-sm" v-for="item in comments" :key="item.id">
        <q-item-section top avatar>
          <q-avatar>
            <q-img :src="item.userInfo.avatar" :ratio="1 / 1" />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>
            <span class="text-sm text-slate-600 cursor-pointer">
              {{ item.userInfo.username }}
            </span>
            <span class="q-pl-sm text-slate-400">{{ item.address }}</span>
          </q-item-label>
          <q-item-label>
            <div v-html="item.content"></div>
          </q-item-label>
          <q-item-label>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-slate-500 text-sm">
                <div>{{ item.relativeTime }}</div>
                <div
                  v-if="webStore.isLogin"
                  @click="
                    () => {
                      likedClick(item);
                    }
                  "
                  class="q-pl-sm cursor-pointer row items-center"
                  :class="item.likedFlag ? 'text-blue-500' : ''"
                >
                  <div>
                    <q-icon class="top-[-1px]" name="fa-regular fa-thumbs-up" />
                    {{ item.likedFlag ? '已点赞' : '点赞' }}
                    ({{ item.likes }})
                  </div>
                </div>
              </div>
            </div>

            <div v-show="item.replyData.total">
              <q-item
                v-for="rep in item.replyData.list"
                class="q-pa-none q-pt-sm"
                :key="rep.id"
              >
                <q-item-section top avatar>
                  <q-avatar>
                    <q-img :src="rep.userInfo.avatar" :ratio="1 / 1" />
                  </q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label>
                    <span class="text-sm text-slate-600 cursor-pointer">
                      {{ rep.userInfo.username }}
                    </span>
                    <span class="q-pl-sm text-slate-400">
                      {{ rep.address }}
                    </span>
                  </q-item-label>
                  <q-item-label>
                    <div v-if="rep.preCmt" class="row">
                      回复
                      <div class="text-primary q-px-xs">
                        {{ rep.preCmt.username }}
                        <q-tooltip class="bg-white text-sm text-gray-7 row">
                          <div class="text-primary">
                            {{ rep.preCmt.username }}
                          </div>
                          :
                          <div
                            class="q-pl-xs"
                            v-html="rep.preCmt.content"
                          ></div>
                        </q-tooltip>
                      </div>
                      <div v-html="rep.content"></div>
                    </div>
                    <div v-else v-html="rep.content"></div>
                  </q-item-label>
                  <q-item-label>
                    <div class="flex justify-between">
                      <div class="flex items-center text-slate-500 text-sm">
                        <div>{{ rep.relativeTime }}</div>
                        <div
                          v-if="webStore.isLogin"
                          @click="
                            () => {
                              likedClick(rep);
                            }
                          "
                          class="q-pl-sm cursor-pointer"
                          :class="rep.likedFlag ? 'text-blue-500' : ''"
                        >
                          <q-icon
                            class="top-[-1px]"
                            name="fa-regular fa-thumbs-up"
                          />
                          {{ rep.likedFlag ? '已点赞' : '点赞' }}
                          ({{ rep.likes }})
                        </div>
                      </div>
                    </div>
                  </q-item-label>
                </q-item-section>
              </q-item>
              <div class="row q-pt-sm">
                <q-pagination
                  size="10px"
                  v-model="item.replyData.pageNum"
                  @update:model-value="
                    (val) => {
                      item.replyData.pageNum = val;
                      replyPage(item);
                    }
                  "
                  :max="item.replyData.totalPage"
                  :max-pages="6"
                  boundary-numbers
                  direction-links
                />
                <q-chip clickable dense square :label="item.replyData.pageSize">
                  <q-menu>
                    <div
                      @click="
                        () => {
                          item.replyData.pageSize = sel;
                          replyPage(item);
                        }
                      "
                      v-close-popup
                      class="q-pa-sm cursor-pointer hover:bg-lightBlue-2"
                      v-for="sel in [10, 20, 40, 100]"
                      :key="sel"
                    >
                      {{ sel }}
                    </div>
                  </q-menu>
                  <q-tooltip> 一页显示几条评论 </q-tooltip>
                </q-chip>
              </div>
            </div>
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item class="q-pa-none q-py-sm" v-if="loading">
        <q-item-section top avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>
        <q-item-section>
          <q-item-label>
            <q-skeleton type="text" />
            <q-skeleton type="text" />
          </q-item-label>
          <q-item-label>
            <q-skeleton type="text" />
          </q-item-label>
          <q-item-label>
            <div class="flex justify-between items-center">
              <div class="flex items-center q-gutter-sm">
                <div>
                  <q-skeleton type="text" class="w-20" />
                </div>
                <div>
                  <q-skeleton type="text" class="w-20" />
                </div>
                <div>
                  <q-skeleton type="text" class="w-20" />
                </div>
              </div>
            </div>
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-card-section>
    <q-card-section class="flex justify-center">
      <q-btn
        :disable="
          pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage
        "
        color="primary"
        flat
        @click="
          () => {
            if (pageParam.pageNum != pageParam.totalPage) {
              pageParam.pageNum++;
              load();
            }
          }
        "
      >
        <span class="q-mx-sm">{{
          pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多'
        }}</span>
      </q-btn>
    </q-card-section>

    <q-dialog
      v-model="reportDig"
      @hide="
        () => {
          reportInfo = {
            commentId: '',
            remark: '',
          };
        }
      "
    >
      <q-card style="min-width: 350px">
        <q-card-section>
          <div class="text-h6">举报原因</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-input
            dense
            v-model="reportInfo.remark"
            autofocus
            @keyup.enter="
              () => {
                reportCommentFn();
              }
            "
          />
        </q-card-section>

        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="关闭" v-close-popup />
          <q-btn
            flat
            label="确认"
            @click="
              () => {
                reportCommentFn();
              }
            "
            v-close-popup
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {
  commentLiked,
  commentList,
  commentReply,
  commentReport,
} from 'src/service/api';
import { useYuan } from 'src/use';
import { watch } from 'vue';
import { useWebStore } from 'src/stores/webStore';

const webStore = useWebStore();

const props = defineProps<{
  articleId: string;
}>();
watch(
  () => props.articleId,
  () => {
    pageParam.value.pageNum = 1;
    comments.value = [];
    load();
  },
);
const comments = ref<Array<Api.CommentVO>>([]);
const { Ok, Fail } = useYuan();

const loading = ref(false);

const reportDig = ref(false);
const reportInfo = ref({
  commentId: '',
  remark: '',
});

const reportCommentFn = async () => {
  if (reportInfo.value.remark == '') {
    Fail('举报原因不可为空');
    return;
  }
  const { error } = await commentReport(reportInfo.value);
  reportDig.value = false;
  if (!error) {
    Ok('举报成功，处理结果将在一定时间内通知你~');
  }
};
const replyPage = (item: Api.CommentVO) => {
  commentReply({
    pageNum: item.replyData.pageNum,
    parentId: item.id,
    pageSize: item.replyData.pageSize,
  }).then(({ error, data }) => {
    if (!error) {
      item.replyData.list = data.rows;
      item.replyData.pageNum = data.pageNum;
      item.replyData.pageSize = data.pageSize;
      item.replyData.total = data.recordCount;
      item.replyCount = item.replyData.total;
      item.replyData.totalPage = data.totalPage;
    }
  });
};

const likedClick = async (item: Api.CommentVO) => {
  const { error, data } = await commentLiked({ commentId: item.id });
  if (error) {
    return;
  }
  if (data) {
    item.likedFlag = true;
    item.likes += 1;
    Ok('点赞成功');
  } else {
    item.likedFlag = false;
    item.likes -= 1;
    Ok('已取消点赞');
  }
};

const pageParam = ref({
  pageNum: 1,
  pageSize: 7,
  totalPage: 0,
  recordCount: 0,
});
const load = () => {
  loading.value = true;
  commentList({
    articleId: props.articleId,
    pageNum: pageParam.value.pageNum,
    pageSize: pageParam.value.pageSize,
  }).then(({ data, error }) => {
    loading.value = false;
    if (!error) {
      comments.value.push(...data.rows);
      pageParam.value.recordCount = data.recordCount;
      pageParam.value.totalPage = data.totalPage;
    }
  });
};

onMounted(() => {
  load();
});
</script>

<style lang="scss" scoped></style>
